// 横屏每日奖励页面
class DailyRewardPage {
  constructor(canvas, ctx, gameManager, api, rootImgUrl) {
    this.canvas = canvas;
    this.ctx = ctx;
    this.gameManager = gameManager;
    this.api = api
    this.rootImgUrl = rootImgUrl
    this.background = wx.createImage();
    this.logo = wx.createImage();
    this.loginBtn = wx.createImage();
    this.DAY_WIDTH = 264;
    this.DAY_TOP_HEIGHT = 42;
    this.DAY_BOTTONM_HEIGHT = 154;
    this.DAY_TOP_COLOR = '#3E5FB0';
    this.DAY_BOTTOM_COLOR = '#243684';
    this.DAY_SELETE_COLOR = '#243684';
    this.SEVEN_DAY_WIDTH = 532;
    this.DAY_TOP_MARGIN = 144;
    this.dayPrizeData = [
      {
        text: '第一天',
        num: 10000
      },
      {
        text: '第二天',
        num: 20000
      },
      {
        text: '第三天',
        num: 30000
      },
      {
        text: '第四天',
        num: 40000
      },
      {
        text: '第五天',
        num: 50000
      },
      {
        text: '第六天',
        num: 60000
      },
      {
        text: '第七天',
        num: 70000
      }
    ]
  }

  onEnter() {
    this.loadResources()
    console.log('进入横屏每日奖励页面');
  }

  onLeave() {
    console.log('离开每日奖励页面');
  }

  update() {
    // 奖励页面的更新逻辑
  }

  loadResources() {
    // 加载背景图片
    this.background.src = this.rootImgUrl + 'signPopupBg.png';
    // 加载按钮图片
    this.loginBtn.src = this.rootImgUrl + 'againIcon.png';

    // 资源加载完成后开始渲染
    let loadedCount = 0;
    const totalResources = 2;

    const checkLoaded = () => {
      loadedCount++;
      if (loadedCount === totalResources) {
        this.render();
      }
    };

    this.background.onload = checkLoaded;
    this.loginBtn.onload = checkLoaded;
  }

  render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    // 横屏奖励页面背景
    this.ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; // 半透明黑色
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

    this.ctx.drawImage(this.background, this.canvas.width / 2 - this.background.width / 2, 70, 1068, 478);
    this.ctx.drawImage(this.loginBtn, this.canvas.width / 2 - this.loginBtn.width / 2, 592, 238, 89);

    // 横屏布局 - 标题
    this.ctx.fillStyle = '#FFFFFF';
    this.ctx.textBaseline = 'top';
    this.ctx.textAlign = 'center';
    this.ctx.font = 'bold 36px Microsoft YaHei-Bold';
    this.ctx.fillText('每周签到', this.canvas.width / 2, 90);

    const basicWidth = this.canvas.width / 2 - this.background.width / 2;
    const magin = 4;
    this.dayPrizeData.forEach((item, index) => {

      if (index <= 3) {
        this.drawDayPrizeSection(basicWidth + index * this.DAY_WIDTH + index * magin, this.DAY_TOP_MARGIN, item, 2)
      } else if (index > 3 && index < 6) {
        let originIndex = index - 4
        this.drawDayPrizeSection(basicWidth + originIndex * this.DAY_WIDTH + originIndex * magin, this.DAY_TOP_MARGIN + this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT + magin, item, 2)
      } else {
        this.drawSevenDayPrizeSection(basicWidth + 2 * this.DAY_WIDTH + 2 * magin, this.DAY_TOP_MARGIN + this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT + magin, item, 2)
      }
    })



    // const userData = this.gameManager.getUserData();

    this.ctx.fillStyle = '#fff';
    this.ctx.font = 'bold 32px Microsoft YaHei-Bold';
    this.ctx.fillText('领 取', this.canvas.width / 2, 620);
  }

  drawDayPrizeSection(x, y, item, selectIndex) {
    this.ctx.fillStyle = this.DAY_TOP_COLOR;
    this.ctx.fillRect(x, y, this.DAY_WIDTH, this.DAY_TOP_HEIGHT);
    this.ctx.fillStyle = this.DAY_BOTTOM_COLOR;
    this.ctx.fillRect(x, y + this.DAY_TOP_HEIGHT, this.DAY_WIDTH, this.DAY_BOTTONM_HEIGHT);
    this.ctx.fillStyle = '#ffffff';
    this.ctx.textAlign = 'center';
    this.ctx.font = '28px Microsoft YaHei';
    this.ctx.fillText(item.text, x + this.DAY_WIDTH / 2, y + this.DAY_TOP_HEIGHT / 2 - 10);
    this.ctx.font = '24px Microsoft YaHei-Regular';
    this.ctx.fillText(item.num, x + this.DAY_WIDTH / 2, y + this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT - 30);
  }

  drawSevenDayPrizeSection(x, y, item, selectIndex) {
    this.ctx.fillStyle = this.DAY_TOP_COLOR;
    this.ctx.fillRect(x, y, this.SEVEN_DAY_WIDTH, this.DAY_TOP_HEIGHT);
    this.ctx.fillStyle = this.DAY_BOTTOM_COLOR;
    this.ctx.fillRect(x, y + this.DAY_TOP_HEIGHT, this.SEVEN_DAY_WIDTH, this.DAY_BOTTONM_HEIGHT);
    this.ctx.fillStyle = '#ffffff';
    this.ctx.textAlign = 'center';
    this.ctx.font = '28px Microsoft YaHei';
    this.ctx.fillText(item.text, x + this.SEVEN_DAY_WIDTH / 2, y + this.DAY_TOP_HEIGHT / 2 - 10);
    this.ctx.font = '24px Microsoft YaHei-Regular';
    this.ctx.fillText(item.num, x + this.SEVEN_DAY_WIDTH / 2, y + this.DAY_TOP_HEIGHT + this.DAY_BOTTONM_HEIGHT - 30);
  }

  handleTouch(x, y) {
    // 横屏宝箱点击区域
    if (x >= 350 && x <= 462 && y >= 304 && y <= 346) {
      this.claimReward();
      this.gameManager.switchPage('main');
    }
  }

  handleKeyDown(e) {
    if (e.keyCode === 32) {
      this.claimReward();
      this.gameManager.switchPage('main');
    }
  }

  handleTouchEnd(e) {

  }

  handleTouchMove(e) {

  }

  claimReward() {
    const today = new Date().toDateString();
    const userData = this.gameManager.getUserData();

    if (userData.sign_in_date !== today) {
      const coinsReward = this.dayPrizeData[0].num;

      this.api.game.applyActivities({
        activit_type: 'CHECK_IN'
      }).then(data => {
        console.log('信息:', data);
      }).catch(err => {
        console.error('获取信息失败:', err);
      });

      this.gameManager.updateUserData(userData);
      console.log(`横屏模式下领取奖励成功，获得${coinsReward}金币`);
    }
  }
}

export default DailyRewardPage;